// cover some element-ui styles

.el-breadcrumb__inner,
.el-breadcrumb__inner a {
    font-weight: 400 !important;
}

.el-upload {
    input[type="file"] {
        display: none !important;
    }
}

.el-upload__input {
    display: none;
}

.cell {
    .el-tag {
        margin-right: 0px;
    }
}

.small-padding {
    .cell {
        padding-left: 5px;
        padding-right: 5px;
    }
}

.fixed-width {
    .el-button--mini {
        padding: 7px 10px;
        width: 60px;
    }
}

.status-col {
    .cell {
        padding: 0 10px;
        text-align: center;

        .el-tag {
            margin-right: 0px;
        }
    }
}

// to fixed https://github.com/ElemeFE/element/issues/2461
.el-dialog {
    transform: none;
    left: 0;
    position: relative;
    margin: 0 auto;
}

// refine element ui upload
.upload-container {
    .el-upload {
        width: 100%;

        .el-upload-dragger {
            width: 100%;
            height: 200px;
        }
    }
}

// dropdown
.el-dropdown-menu {
    a {
        display: block;
    }
}

// fix date-picker ui bug in filter-item
.el-range-editor.el-input__inner {
    display: inline-flex !important;
}

// to fix el-date-picker css style
.el-range-separator {
    box-sizing: content-box;
}

.el-menu--collapse > div > .el-submenu > .el-submenu__title .el-submenu__icon-arrow {
    display: none;
}

.el-dropdown .el-dropdown-link {
    color: var(--el-color-primary) !important;
}

// 弹窗美化
.el-dialog {
    // 定义弹窗大小
    &[data-size="small"] {
        width: 600px;
        --dialog-height: 400px;
    }

    &[data-size="medium"] {
        width: 1000px;
    }

    &[data-size="large"] {
        width: 1200px;
    }

    --dialog-header-height: 44px; //头部高度
    --dialog-padding-bottom: 70px; //底部高度
    --dialog-theme-color: #0ca7a8; //主题色
    --dialog-height: 80%; //弹窗高度

    top: 50%;
    position: relative;
    width: 900px;
    padding: 0;
    border-radius: 10px;
    height: var(--dialog-height);
    transform: translateY(-50%);
    overflow: hidden;

    &:not(.is-fullscreen):not(.add-index) {
        margin-top: 0 !important;
    }

    .el-dialog__header {
        height: var(--dialog-header-height);
        line-height: var(--dialog-header-height);
        padding: 0 15px !important;
        background-color: var(--dialog-theme-color);
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        position: relative;

        .el-dialog__title {
            color: #fff;
            font-size: 14px;
            font-weight: 700;
        }

        .el-dialog__close {
            font-size: 30px;
            color: white;
        }
    }

    .el-dialog__headerbtn {
        height: var(--dialog-header-height);
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .el-dialog__body {
        padding: 16px;
        height: calc(100% - var(--dialog-header-height) - var(--dialog-padding-bottom));
        // 设置滚动
        overflow-y: auto;
    }

    .el-dialog__footer {
        text-align: center;
        padding: 0;
        height: var(--dialog-padding-bottom);
        line-height: var(--dialog-padding-bottom);
        background: #f5f7fa;
        z-index: 0;
    }

    .operateDropOption {
        width: 80%;
        margin: 0 auto;
    }
}

/* 弹窗动画开始 */
.dialog-fade-enter-to {
    .el-dialog {
        animation: dialog-in 0.3s !important;
    }
}

.dialog-fade-leave-to {
    .el-dialog {
        animation: dialog-out 0.3s !important;
    }
}

@keyframes dialog-in {
    0% {
        opacity: 0;
        transform: scale(0.5, 0.5) translateY(-50%);
    }

    61.8% {
        opacity: 1;
        transform: scale(1.01, 1.01) translateY(-50%);
    }

    100% {
        opacity: 1;
        transform: scale(1, 1) translateY(-50%);
    }
}

@keyframes dialog-out {
    0% {
        opacity: 1;
        transform: scale(1, 1) translateY(-50%);
    }

    30% {
        opacity: 0.8;
        transform: scale(1.05, 1.05) translateY(-50%);
    }

    100% {
        opacity: 0;
        transform: scale(0.5, 0.5) translateY(-50%);
    }
}

// 弹窗动画结束
